<template>
  <view class="userInfo">
    <view class="infoItem">
      <view class="label">房间编号</view>
      <input class="value" type="text" v-model="leaseInfo.houseId" disabled />

    </view>
    <view class="infoItem">
      <view class="label">原合同编号</view>
      <input class="value" type="text" v-model="leaseInfo.contractId" disabled />
    </view>
    <view class="infoItem">
      <view class="label">续租开始时间</view>
      <view class="value" @tap="onDisplay('leaseStartTime')">{{ formatDate(leaseInfo.fromDate) }}</view>
    </view>
    <view class="infoItem">
      <view class="label">续租结束时间</view>
      <view class="value" @tap="onDisplay('leaseEndTime')">{{ formatDate(leaseInfo.toDate) }}</view>
    </view>
    <uni-calendar ref="calendar" :insert="false" @confirm="onConfirm" />
    <button class="submitButton" type="primary" @tap="submit">
      提交
    </button>
  </view>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue';
import { insertRental } from '../../services/rental';
import { RentalInfo } from '/@/types/contract';
import { onLoad } from '@dcloudio/uni-app';

onLoad(
  (option) => {
    if (option) {

      console.log(option)
      leaseInfo.contractId = option.contractId
      leaseInfo.houseId = option.houseId
    }
  }
)
const leaseInfo = reactive<RentalInfo>({

  fromDate: '',
  toDate: '',
  status: 1,
  rentalStatus: 0,
  contractId: -1,
  houseId: -1,

});


const calendarType = ref('');
const calendar = ref(null);

const onDisplay = (type: string) => {
  calendar.value.open();
  calendarType.value = type;
};



const formatDate = (date: string) => {
  return date !== ''
    ? `${new Date(date).getFullYear()}/${new Date(date).getMonth() + 1}/${new Date(date).getDate()}`
    : '请选择';
};

const onConfirm = (event) => {
  console.log(event)
  const newDate = event.fulldate;
  if (calendarType.value === 'leaseStartTime') {
    leaseInfo.fromDate = newDate;
  } else if (calendarType.value === 'leaseEndTime') {
    leaseInfo.toDate = newDate;
  }

};

const submit = () => {
  console.log(leaseInfo)
  // || !leaseInfo.houseId 
  if (!leaseInfo.fromDate || !leaseInfo.toDate || !leaseInfo.contractId) {
    uni.showToast({
      title: "请填写完整信息",
      icon: "none"
    });
    return;
  }
  insertRental(leaseInfo).then((res) => {
    if (res.code == 200) {
      uni.navigateTo({
        url: "/pages/prompt/prompt?msg=续租已提交"
      });
    }
  })

};
</script>

<style scoped>
.userInfo {
  padding: 20upx;
  font-size: 14px;
  background-color: #fff;
  border-radius: 5px;
}

.infoItem {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  height: 30px;
  border-bottom: 1px solid #f4f4f4;
}

.label {

  color: #333;
}

.value {

  color: #666;
  cursor: pointer;
}

.submitButton {
  margin-top: 40upx;
}
</style>
